<template>
  <div class="main_box">
    <el-container class="container_box">
      <el-header class="el_header_box">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
          <el-menu-item index="1" @click="()=> this.$router.push('/main/userCenter')">用户中心</el-menu-item>
          <el-submenu index="2" v-if="$store.getters.getUser.username !='admin'">
            <template slot="title">任务</template>
            <div v-for="(item, index) in orderTypeNames" :key="index">
              <el-menu-item :index="`2-${index+1}`"  @click="toTaskList(item)">
                {{item}}
              </el-menu-item>
            </div>

          </el-submenu>
          <el-menu-item index="3" @click="()=> this.$router.push('/main/brokerList')">代理</el-menu-item>
          <el-menu-item index="4"
                        v-if="$store.getters.getUser.username=='admin'"
                        @click="()=> this.$router.push('/main/placardEdit')">编辑公告</el-menu-item>
          <el-submenu index="5" v-if="$store.getters.getUser.username=='admin'">
            <template slot="title">任务管理</template>
            <el-menu-item index="5-1" @click="()=> this.$router.push('/main/taskManagement')">编辑</el-menu-item>
            <el-menu-item index="5-2" @click="()=> this.$router.push('/main/taskAdminList')">列表</el-menu-item>
          </el-submenu>
          <span class="user_box">
              <el-dropdown>
              <img class="avatar" src="../assets/bigUserHeader.png">
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="dialogFormVisible = true">修改密码</el-dropdown-item>
                <el-dropdown-item><router-link to="/logout">退出</router-link></el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
              {{this.$store.getters.getUser.username}}</span>
        </el-menu>

      </el-header>
      <el-header>
        <NoticeBar></NoticeBar>
      </el-header>
      <el-main>
        <router-view :key="this.$route.path"></router-view>
      </el-main>

      <el-dialog title="修改密码" :visible.sync="dialogFormVisible" class="reset-password-box">
        <el-form :model="form" class="reset-password-form-box">
          <el-form-item  class="old-password-box" label="旧密码" :label-width="formLabelWidth">
            <el-input type="password" v-model="form.oldPassword" autocomplete="off"/>
          </el-form-item>
          <el-form-item class="new-password-box" label="新密码" :label-width="formLabelWidth">
            <el-input type="password" v-model="form.newPassword" autocomplete="off" />
          </el-form-item>
          <el-form-item class="new-password-box" label="确认密码" :label-width="formLabelWidth">
            <el-input type="password" v-model="form.confirmPassword" autocomplete="off" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="reset-password-dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="resetPassword">确 定</el-button>
        </div>
      </el-dialog>
    </el-container>
  </div>
</template>

<script>

  import NoticeBar from "../components/NoticeBar";
  export default {
    inject: ['reload'],
    data() {
      return {
        activeIndex: '1',
        orderTypeNames: [],

        dialogFormVisible: false,
        form: {
          oldPassword: '',
          newPassword: '',
          confirmPassword: ''
        },
        formLabelWidth: '100px',
        formInputWidth: '300px',
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);

      },
      initOrderTypeNames(){
        this.orderTypeNames = this.$store.getters.getUser.orderTypeNames;
      },
      toTaskList(item){
        console.log(item);
        this.$router.push({path: '/main/taskList', query: {typeName: item}});
      },
      resetPassword(){
        let params = {
          oldPass: this.form.oldPassword,
          newPass: this.form.newPassword,
          newPass2: this.form.confirmPassword
        }
        this.$http.put('/v1/users/password', params)
        .then(res =>{
          this.$message({type: 'success',message: '密码修改成功!'});
          this.dialogFormVisible = false
          this.$router.push('/logout')
        })
        .catch(err=>{
          let {response} = err
          if (response){
            this.$message.error(response.data.message);
            return false;
          }else {
            console.log(err)
          }
        })
      }
    },
    mounted() {
      this.initOrderTypeNames();
    },
    components: {
      NoticeBar
    }
  }
</script>

<style scoped>
  .el_header_box {
    background-color: rgba(0, 0, 0, 0);
    color: #333;
    line-height: 60px;
    font-size: 12px;
  }

  .user_box {
    font-size: 17px;
    float: right;
    margin-right: 37px
  }

  .avatar {
    width: 22px;
    vertical-align: -5px;
  }

  .main_box {
    background: #f0f2f5;
    position: relative;
    height: 100%;
    width: 100%;
  }

  .container_box {
  }

  .reset-password-box{
    width: auto;
  }
  .old-password-box{
    text-align:left;
  }
  .new-password-box{
    text-align:left;
  }
  .reset-password-form-box{
    padding-right: 65px;
  }
  .reset-password-dialog-footer{
    text-align: center;
    margin-top: -30px;
  }
</style>
